<template>
	<div class="order-box">
		<div class="tab-container">
			<div class="tab-item" v-for="(tab, index) in tabs" :key="index" @click="changeTab(tab.payment_status)"
				:class="{ active: activeTab === tab.payment_status }">
				{{ tab.name }}
			</div>
		</div>

		<div class="tabContents" v-for="(v,k) in lists" :key="k">
			<div class="order_id">订单编号:{{v.order_id}}</div>
			<div class="box" v-for="(v1,k1) in v.list" :key="k1">
				<div class="product">
					<div class="image">
						<image :src="v1.image"></image>
					</div>
					<div class="title">
						<view>商品名称：{{v1.name}}</view>
					</div>
					<div class="price_quantity">
						<div class="price">
							¥{{v1.price}}
						</div>
						<div class="quantity">
							×️{{v1.quantity}}
						</div>
						
						
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
						"payment_status": 0,
						"name": "全部"
					},
					{
						"payment_status": 1,
						"name": "待付款"
					},
					{
						"payment_status": 2,
						"name": "待发货"
					},
					{
						"payment_status": 3,
						"name": "待收货"
					},
					{
						"payment_status": 4,
						"name": "待评价"
					}
				],
				activeTab: 0,
				lists: []
			};
		},
		created() {
			this.getOrderList(this.activeTab)
		},
		methods: {
			changeTab(index) {
				this.activeTab = index;
				this.getOrderList(this.activeTab)
			},
			async getOrderList(activeTab) {
				var parms = {}
				parms.payment_status = activeTab
				var response = await this.$http.getOrderList(parms)
				if (response.code == 1) {
					this.lists = response.data.data
				}
				console.log(response)
			}
		}
	};
</script>

<style>
	/* 样式 */


	body {
		background-color: #F6F6F6;
	}

	.tab-container {
		display: flex;
		justify-content: space-around;
		background-color: white;
		padding: 10px;
		/* border: 1px solid red; */
	}

	.tab-item {
		padding: 5px 10px;
		cursor: pointer;
	}

	.tab-item.active {
		background-color: #fff;
		color: crimson;
		font-weight: 700;
		font-size: 14px;
		border-bottom: 3px solid crimson;
	}

	.tabContents {

		/* border: 1px solid red; */
		background-color: white;
		width: 95%;
		margin: 10px auto;

	}
	
	.tabContents .order_id{
		font-size: 12px;
		font-weight: 700;
	}

	.box {
		margin: 0 auto;
		background-color: white;
		margin-top: 10px;
		width: 95%;
		height: 120px;
		/* border: 1px solid red; */
		border-radius: 5px;
	}


	.box .image {
		width: 100px;
		height: 100px;
		overflow: hidden;
		float: left;

	}

	.box image {
		width: 100%;
		/* 图片宽度为容器的百分比 */
		height: 100%;
		/* 图片高度为容器的百分比 */
		object-fit: cover;
		/* 可选：根据需要调整 object-fit 属性以满足您的布局需求 */
	}
	.box .title{
		float: left;
		width: 110px;
		font-size: 10px;
		padding: 0px 4px;
		/* font-weight: 400; */
		margin-left: 8px;
		/* border: 1px solid red; */
		overflow-wrap: break-word;
		
	}
	.box .price_quantity{
		float: right;
		width: 40px;
		margin-left: 5px;
		/* border: 1px solid red; */
	}
	
	.price_quantity .price{
		font-size: 12px;
		font-weight: 100;
	}
	.price_quantity .quantity{
		font-size: 12px;
		font-weight: 100;
		float: right;
	}

	/* 内容区域样式 */
</style>